<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="item.name" :name="item.component" v-for="item in tabs" :key="item.id">
        <component :is="components[item.component]"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'system_config',
  data() {
    return {
      tabs: [],
      activeName: '',
      components: {
        'saas': () => import('./component/saas'),
        'tencentcloud': () => import('./component/tencentcloud'),
        'wechat': () => import('./component/wechat'),
        'upload': () => import('./component/upload'),
        'basic': () => import('./component/basic')
      }
    }
  },
  computed: {
    ConfigModel() {
      return this.$store.$db().model('config');
    },
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      console.log("init");
      await this.ConfigModel.fetchBy();
      let configData = this.ConfigModel.all();
      this.tabs =  this.ConfigModel.query().where('pid',0).get();
      this.activeName = this.tabs[0].component;
     /*  this.$http.get('config/parent').then(response => {
         this.tabs = response.data
         this.activeName = this.tabs[0].component
       }) */
    },
  }
}
</script>

<style scoped>

</style>
